<template>
  <div style="background-color: #FFFFFF; border-top-left-radius: 10px;border-top-right-radius: 10px; border: none;">
    <!--发表评论按钮-->
    <div style="margin-top: 20px;margin-bottom: 10px">
      <span style="font-weight: bold">发表评论&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <el-button type="primary" size="mini" @click="openForm" icon="el-icon-edit" circle></el-button>
    </div>
    <!--输入框-->
    <el-form v-show="showForm" :model="form" ref="dataForm">
      <el-form-item>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="评论内容"
          style="border: 0"
          resize="none"
          v-model="form.content"
        >
        </el-input>
      </el-form-item>
      <!--本条评论属于哪个页面-->
      <el-form-item v-show="false">
        <el-input type="hidden"></el-input>
      </el-form-item>
      <!--评论所属文章id-->
      <el-form-item v-show="false">
        <el-input type="hidden"></el-input>
      </el-form-item>
      <!--评论者个人信息-->
      <div class="info" style="display: flex;justify-content: space-between;padding-top: 0">
        <!--昵称-->
        <el-form-item>
          <el-input placeholder="昵称（必填）" v-model="form.nickname"></el-input>
        </el-form-item>
        <!--邮箱-->
        <el-form-item>
          <el-input placeholder="邮箱（必填）" v-model="form.email"></el-input>
        </el-form-item>
        <!--个人站点-->
        <el-form-item>
          <el-input placeholder="个人站点（可选）" v-model="form.website"></el-input>
        </el-form-item>
        <el-button type="primary" style="height:40px" @click="onSubmit">发布</el-button>
      </div>
    </el-form>
    <!--评论数量-->
    <div>
      <span v-if="commentNumber>0">Comments&nbsp;&nbsp;{{ commentNumber }}条</span>
      <span v-else>暂无评论</span>
    </div>
    <!--分割线-->
    <el-divider></el-divider>
    <!--评论列表-->
    <div class="commentContainer" v-for="comment in comments" :key="comment.id" style="padding: 0">
      <!--根评论-->
      <div class="rootComment">
        <!--头像-->
        <el-avatar :src="comment.avatar" style="float: left"></el-avatar>
        <div style="display: inline-block;margin-left:8px;margin-bottom: 10px" class="infoAndContent">
          <!--姓名-->
          <span style="font-weight: bold">{{ comment.nickname }}&nbsp;&nbsp;</span>
          <!--身份-->
          <span v-if="comment.isAdminComment" style="font-size: 12px;">管理员&nbsp;&nbsp;</span>
          <!--评论时间-->
          <span style="font-size: 12px;">{{ comment.createTime }}</span>
          <!--评论内容-->
          <p v-if="comment.isPublished===true" style="margin-bottom: 0px;margin-top: 5px">{{ comment.content }}</p>
          <p v-else style="margin-bottom: 0;margin-top: 5px">该评论暂不可见</p>
        </div>
        <div v-if="comment.isPublished" style="display: inline-block;float: right">
          <el-button type="primary" size="mini" @click="recommend(comment.id,comment.nickname)"
                     v-if="$store.state.parentComment.id!==comment.id">回复
          </el-button>
          <el-button v-else @click="cancel" type="primary" size="mini">取消</el-button>
        </div>


        <!--回复表单-->
        <el-form v-show="$store.state.parentComment.id===comment.id" :model="form">
          <el-form-item>
            <el-input
              type="textarea"
              :rows="3"
              placeholder="评论内容"
              style="border: 0"
              resize="none"
              v-model="form.content"
            >
            </el-input>
          </el-form-item>
          <!--本条评论属于哪个页面-->
          <el-form-item v-show="false">
            <el-input type="hidden"></el-input>
          </el-form-item>
          <!--评论所属文章id-->
          <el-form-item v-show="false">
            <el-input type="hidden"></el-input>
          </el-form-item>
          <!--评论者个人信息-->
          <div class="info" style="display: flex;justify-content: space-between;padding-top: 0">
            <!--昵称-->
            <el-form-item>
              <el-input placeholder="昵称（必填）" v-model="form.nickname"></el-input>
            </el-form-item>
            <!--邮箱-->
            <el-form-item>
              <el-input placeholder="邮箱（必填）" v-model="form.email"></el-input>
            </el-form-item>
            <!--个人站点-->
            <el-form-item>
              <el-input placeholder="个人站点（可选）" v-model="form.website"></el-input>
            </el-form-item>
            <el-button type="primary" style="height:40px" @click="onSubmit">发布</el-button>
          </div>
        </el-form>
      </div>
        <template v-for="childrenComment in comment.children">
          <!--子孙评论-->
          <div class="childrenComment" v-if="comment.children!=null&&comment.children.length>0"
               :key="childrenComment.id" style="margin-left: 30px;">

              <!--头像-->
              <el-avatar :src="childrenComment.avatar" style="float: left"></el-avatar>


            <!--个人信息和回复-->
            <div style="display: inline-block;margin-left:8px;margin-bottom: 10px">
              <!--昵称-->
              <span style="font-weight: bold">{{ childrenComment.nickname }}&nbsp;&nbsp;</span>
              <!--身份-->
              <span v-if="childrenComment.isAdminComment" style="font-size: 12px;">管理员&nbsp;&nbsp;</span>
              <!--回复时间-->
              <div style="display: inline-block;text-align: center;line-height: 20px">
                <span style="font-size: 12px;">{{ childrenComment.createTime }}</span>
              </div>
              <!--评论内容-->
              <p v-if="childrenComment.isPublished" style="margin-bottom: 0;margin-top: 5px" v-html="childrenComment.content">{{ childrenComment.content }}</p>
              <p v-else style="margin-bottom: 0;margin-top: 5px">该评论暂不可见</p>

              <div v-if="childrenComment.isPublished">
                <i v-if="$store.state.parentComment.id!==childrenComment.id"   @click="recommend(childrenComment.id,childrenComment.nickname)" style="margin-top: 8px;font-size: 12px" class="el-icon-chat-square">回复</i>
                <i v-else class="el-icon-chat-square" style="margin-top: 8px;font-size: 12px" @click="cancel">取消回复</i>
              </div>
            </div>


            <!--回复表单-->
            <el-form v-show="$store.state.parentComment.id===childrenComment.id" :model="form">
              <el-form-item>
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="评论内容"
                  style="border: 0"
                  resize="none"
                  v-model="form.content"
                >
                </el-input>
              </el-form-item>
              <!--本条评论属于哪个页面-->
              <el-form-item v-show="false">
                <el-input type="hidden"></el-input>
              </el-form-item>
              <!--评论所属文章id-->
              <el-form-item v-show="false">
                <el-input type="hidden"></el-input>
              </el-form-item>
              <!--评论者个人信息-->
              <div class="info" style="display: flex;justify-content: space-between;padding-top: 0">
                <!--昵称-->
                <el-form-item>
                  <el-input placeholder="昵称（必填）" v-model="form.nickname"></el-input>
                </el-form-item>
                <!--邮箱-->
                <el-form-item>
                  <el-input placeholder="邮箱（必填）" v-model="form.email"></el-input>
                </el-form-item>
                <!--个人站点-->
                <el-form-item>
                  <el-input placeholder="个人站点（可选）" v-model="form.website"></el-input>
                </el-form-item>
                <el-button type="primary" style="height:40px" @click="onSubmit">发布</el-button>
              </div>
            </el-form>
          </div>
        </template>

    </div>
    <!--分页-->
    <el-pagination
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-size="pageSize"
      :total="totalCount"
      layout="pager"
      style="text-align: center"
      hide-on-single-page="true"
    background>

    </el-pagination>
  </div>


</template>

<script>
import {SET_PARENT_COMMENT_ID,SET_PARENT_COMMENT} from "@/store/mutations-types";

export default {
  name: "Comment",
  data() {
    return {
      //是否显示评论表单
      showForm: false,
      comments: [],
      pageIndex: 1,
      pageSize: 6,
      commentNumber:0,
      totalCount:0,
      form: {
        nickname: '',
        email: '',
        content: '',
        website: '',//个人站点
        isPublished: true, //是否公开
        isAdminComment: false, //是否为管理员评论
        page: 0, //评论所在页面
        isNotice: true, //开启邮件提醒
        parentCommentId: 0,//父评论id
        belongId: this.$attrs.belongId//所属文章
      },
    }
  },
  methods: {
    //打开评论表单
    openForm() {
      this.showForm = !this.showForm
      this.$store.commit(SET_PARENT_COMMENT, {id:0,nickname:''})

    },
    //判断是否为管理员评论
    isCommentOfAdmin() {
      if (localStorage.getItem("viggon") !== null) {
        this.form.isAdminComment = true;
      }
    },
    //获取本页面该文章所有评论
    getAllComments() {
      this.getCommentNumber();//获取评论总数
      let webpage = sessionStorage.getItem("webPage");
      let belongId = sessionStorage.getItem("belongId");
      this.$http({
        url: '/comment/list',
        params: {
          'webpage': webpage,
          'belongId': belongId,
          'page': this.pageIndex,
          'limit': this.pageSize,
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.comments = data.data.list;
          this.totalCount= data.data.totalCount;

        }
      })
    },
    //提交评论
    onSubmit() {
      this.isCommentOfAdmin();
      let content=this.form.content;
      if(this.$store.state.parentComment.id!==0){
        let name='@'+this.$store.state.parentComment.nickname;
        name='<b>'+name+'</b>&nbsp;&nbsp;'
        content=name+content;
      }
      this.$http({
        url: '/comment/save',
        method: 'post',
        data: {
          nickname: this.form.nickname,
          email: this.form.email,
          content: content,
          website: this.form.website,
          isPublished: this.form.isPublished,
          isAdminComment: this.form.isPublished,
          page: sessionStorage.getItem('webPage'),
          isNotice: this.form.isNotice,
          belongId: sessionStorage.getItem('belongId'),
          parentCommentId: this.$store.state.parentComment.id
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          //还原表单
          this.form= {
            nickname: '',
            email: '',
            content: '',
            website: '',//个人站点
            isPublished: true, //是否公开
            isAdminComment: false, //是否为管理员评论
            page: 0, //评论所在页面
            isNotice: true, //开启邮件提醒
            parentCommentId: 0,//父评论id
            belongId: this.$attrs.belongId//所属文章
          },
          this.getAllComments();//刷新所有评论
          this.$store.commit(SET_PARENT_COMMENT, {id:0,nickname:''});
          this.showForm=false;
          this.$notify.success({
            title: '成功',
            message: '评论成功',
            showClose: false
          });
        }
      })
    },
    //点击回复按钮
    recommend(id,nickname) {
      this.showForm = false;
      //this.$store.commit(SET_PARENT_COMMENT_ID, id)
      this.$store.commit(SET_PARENT_COMMENT,{id,nickname})
    },
    //点击取消回复
    cancel() {
      this.$store.commit(SET_PARENT_COMMENT, {id:0,nickname:''})
    },
    //当前页改变
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getAllComments()
    },
    //获取评论数量
    getCommentNumber() {
      let webpage = sessionStorage.getItem("webPage");
      let belongId = sessionStorage.getItem("belongId");
      this.$http({
        url: '/comment/number',
        params: {
          'webPage': webpage,
          'belongId': belongId,
        }
      }).then(({data})=>{
        if(data&&data.code===0){
          this.commentNumber=data.data;
        }
      })
    }
  },
  mounted() {
    this.getAllComments();
  },


}
</script>

<style scoped>
.el-form-item:nth-child(3) {
  width: 25%;
}

i:hover{
  cursor: pointer;
}


</style>
